<template>
  <!-- 开始编写login的页面静态结构 -->

    <div class="container">
      <div class="close"><span class="iconfont iconicon-test"></span></div>
      <div class="logo"><span class="iconfont iconnew"></span></div>
      <div class="inputs">
        <!-- <input placeholder="请输入手机号" class="input" >
        <input
          placeholder="密码"
          class="input"
          type="password"
        > -->
       <!--  <hminput placeholder="用户名/手机号码"
                 :value='user.username'
                 @input="handler"
        > -->
          <hminput placeholder='用户名 / 手机号码'
               v-model='user.username'
               :rules='/^1\d{10}$|^1\d{4}$/'
               msg='手机号输入不合法 1  我是msg'
               >
          </hminput>
          
           <hminput v-model="user.password"></hminput>
      </div>
      <p class="tips">
        没有账号？
        <a href="#/register" class="">去注册</a>
      </p>
        <!-- 使用按钮模块 -->
        <hmbutton @click="login" type="danger">
          <span>登陆</span>
        </hmbutton>
    </div>

</template>
<script>
// 引入按钮封装模块
import hmbutton from "@/components/hmbutton.vue";
import hminput from "@/components/hminput.vue"
// 引入登录方法
import {userlogin} from '@/apis/user.js'

export default {
  data() {
    return {
      user:{
        username: '13800138000',
        password: '123'
      }
    }
  },
  // 注册模块
  components: {
    hmbutton,hminput
  },
  methods: {
    async login() {
      // console.log(e);
     if(/^1\d{10}$|^1\d{4}$/.test(this.user.username) && /^.{3,}$/.test(this.user.userpassword)){
      /*  userlogin(this.user)
         .then((res)=>{
           console.log(res);
         })
         .catch((err)=>{
           console.log(err);
         }) */
         try{
           let res = await userlogin(this.user)
           console.log(res);

           if(res.data.statusCode == 200){
             this.$toast(res.data.message)
            //  将后台返回的token存储到本地存储
            localStorage.setItem('toutiao_59_token',res.data.data.token)
            // 将用户信息存储本地存储
            localStorage.setItem('toutiao_59_userinfo',JSON.stringify(this.user))
            this.$router.push({path:'personal/'+res.data.data.user.id})
           }
         }
         catch(err){
           this.$toast('用户名或密码输入不正确2')
         }
     }else{
       this.$toast('用户名或密码输入不正确 我是点击之后的 未发送请求3')
     }
    },
  /*   handler(v){
      console.log(v);
      this.user.username = v

    } */
  },
};
</script>
<style lang="less" scoped>
.container {
  padding: 20px;
}

.close {
  span {
    // font-size: 127 / 360 * 100vw;
    font-size: 25px
  }
}
.logo {
  display: flex;
  justify-content: center;

  span {
    display: block;
    font-size: 120px;
    // font-size: 200 / 360 * 100vw;
    color: #d81e06;
  }
}

.inputs {
  input {
    margin-bottom: 20px;
  }
}

.tips {
  text-align: right;
  margin-bottom: 20px;

  a {
    color: #3385ff;
  }
}
</style>